@import '../variables';

.categories {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;

    li {
      background-color: #f9f9f9;
      padding: 13px 30px;
      border-radius: 30px;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.1s ease-in-out;
      @include noselect();

      &:hover {
        background-color: darken(#f9f9f9, 2%);
      }

      &:active {
        background-color: darken(#f9f9f9, 5%);
      }

      &.active {
        background-color: #282828;
        color: #fff;
      }
    }
  }
}
